<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>业力分析报表</a-breadcrumb-item>
      <a-breadcrumb-item>善恶比例统计</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">善恶比例统计</div>
        <div class="header-subtitle">阴曹地府 · 业力平衡分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card good-stat">
            <div class="stat-icon">
              <SmileOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">善行总数</div>
              <div class="stat-value">{{ goodDeedsCount }}</div>
              <div class="stat-label">万件</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card evil-stat">
            <div class="stat-icon">
              <FrownOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">恶行总数</div>
              <div class="stat-value">{{ evilDeedsCount }}</div>
              <div class="stat-label">万件</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card ratio-stat">
            <div class="stat-icon">
              <PercentageOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">善恶比例</div>
              <div class="stat-value">{{ goodEvilRatio }}</div>
              <div class="stat-label">:1</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card balance-stat">
            <div class="stat-icon">
              <CalculatorOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">道德指数</div>
              <div class="stat-value">{{ moralIndex }}</div>
              <div class="stat-label">分</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 善恶比例饼图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="善恶行为分布" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="pieTimeRange" style="width: 120px">
                <a-select-option value="month">本月</a-select-option>
                <a-select-option value="quarter">本季度</a-select-option>
                <a-select-option value="year">本年度</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="karmaRatioPieOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 善恶趋势对比 -->
        <a-col :xs="24" :lg="12">
          <a-card title="善恶行为趋势对比" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="goodEvilTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 行为类型分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="行为类型分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="behaviorTypeOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 年龄组善恶分布 -->
        <a-col :xs="24" :lg="12">
          <a-card title="年龄组善恶分布" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="ageGroupKarmaOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区善恶热力图 -->
        <a-col :xs="24">
          <a-card title="地区善恶比例热力图" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="regionKarmaHeatmapOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 善恶行为详细统计 -->
        <a-col :xs="24" :lg="16">
          <a-card title="善恶行为详细统计" :bordered="false" class="table-card">
            <template #extra>
              <a-space>
                <a-input-search v-model:value="searchKeyword" placeholder="搜索行为类型" style="width: 200px" @search="onSearch" />
                <a-button @click="exportKarmaData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
              </a-space>
            </template>
            <a-table :columns="karmaColumns" :data-source="filteredKarmaData" :pagination="{ pageSize: 10 }" size="small" />
          </a-card>
        </a-col>

        <!-- 道德评级分析 -->
        <a-col :xs="24" :lg="8">
          <a-card title="道德评级分析" :bordered="false" class="rating-card">
            <div class="rating-content">
              <div class="rating-item">
                <div class="rating-header">
                  <span class="rating-label">圣人级</span>
                  <span class="rating-count">{{ saintCount }}人</span>
                </div>
                <a-progress :percent="saintPercentage" stroke-color="#52c41a" :show-info="false" />
              </div>

              <div class="rating-item">
                <div class="rating-header">
                  <span class="rating-label">善人级</span>
                  <span class="rating-count">{{ goodPersonCount }}人</span>
                </div>
                <a-progress :percent="goodPersonPercentage" stroke-color="#73d13d" :show-info="false" />
              </div>

              <div class="rating-item">
                <div class="rating-header">
                  <span class="rating-label">普通级</span>
                  <span class="rating-count">{{ normalCount }}人</span>
                </div>
                <a-progress :percent="normalPercentage" stroke-color="#faad14" :show-info="false" />
              </div>

              <div class="rating-item">
                <div class="rating-header">
                  <span class="rating-label">恶人级</span>
                  <span class="rating-count">{{ evilPersonCount }}人</span>
                </div>
                <a-progress :percent="evilPersonPercentage" stroke-color="#ff7875" :show-info="false" />
              </div>

              <div class="rating-item">
                <div class="rating-header">
                  <span class="rating-label">极恶级</span>
                  <span class="rating-count">{{ extremeEvilCount }}人</span>
                </div>
                <a-progress :percent="extremeEvilPercentage" stroke-color="#ff4d4f" :show-info="false" />
              </div>
            </div>

            <div class="summary-section">
              <h4>评级说明</h4>
              <ul class="summary-list">
                <li><span class="level saint">圣人级</span>：业力值 ≥ 10000分</li>
                <li><span class="level good">善人级</span>：业力值 5000-9999分</li>
                <li><span class="level normal">普通级</span>：业力值 -999-4999分</li>
                <li><span class="level evil">恶人级</span>：业力值 -5000- -1000分</li>
                <li><span class="level extreme">极恶级</span>：业力值 ≤ -5001分</li>
              </ul>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SmileOutlined, FrownOutlined, PercentageOutlined, CalculatorOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart, HeatmapChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, PieChart, BarChart, LineChart, HeatmapChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const pieTimeRange = ref('year')
const searchKeyword = ref('')

// 核心指标数据
const goodDeedsCount = ref('2,847')
const evilDeedsCount = ref('1,256')
const goodEvilRatio = ref('2.3')
const moralIndex = ref('78.5')

// 道德评级数据
const saintCount = ref('25,680')
const saintPercentage = ref(15.2)
const goodPersonCount = ref('89,420')
const goodPersonPercentage = ref(52.8)
const normalCount = ref('38,950')
const normalPercentage = ref(23.0)
const evilPersonCount = ref('12,340')
const evilPersonPercentage = ref(7.3)
const extremeEvilCount = ref('2,890')
const extremeEvilPercentage = ref(1.7)

// 善恶比例饼图
const karmaRatioPieOption = computed(() => {
  const data = [
    {
      value: 69.5,
      name: '善行',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#73d13d' }
          ]
        }
      }
    },
    {
      value: 30.5,
      name: '恶行',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#ff7875' },
            { offset: 1, color: '#ff4d4f' }
          ]
        }
      }
    }
  ]

  return {
    title: {
      text: '善恶行为占比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      textStyle: { color: '#fff' }
    },
    series: [
      {
        name: '行为类型',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          color: '#fff',
          formatter: '{b}\n{c}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: data
      }
    ]
  }
})

// 善恶趋势对比图
const goodEvilTrendOption = computed(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const goodDeeds = [28470, 29560, 31200, 32850, 35680, 38420, 36890, 35670, 34520, 33840, 32190, 30950]
  const evilDeeds = [12340, 11890, 12560, 13240, 14680, 15290, 14820, 14350, 13920, 13560, 12890, 12450]

  return {
    title: {
      text: '善恶行为月度趋势',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['善行', '恶行'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '行为数量',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '善行',
        type: 'line',
        smooth: true,
        data: goodDeeds,
        lineStyle: { color: '#52c41a', width: 3 },
        areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
      },
      {
        name: '恶行',
        type: 'line',
        smooth: true,
        data: evilDeeds,
        lineStyle: { color: '#ff7875', width: 3 },
        areaStyle: { color: 'rgba(255, 120, 117, 0.3)' }
      }
    ]
  }
})

// 行为类型分析
const behaviorTypeOption = computed(() => {
  const goodTypes = ['助人为乐', '孝敬父母', '诚实守信', '见义勇为', '慈善捐赠', '环保行为', '志愿服务']
  const goodCounts = [58960, 45230, 42180, 28750, 35420, 31680, 27950]
  const evilTypes = ['欺诈行为', '暴力犯罪', '贪污腐败', '环境破坏', '虐待他人', '偷盗抢劫', '造谣诽谤']
  const evilCounts = [-25680, -18920, -16450, -14280, -12350, -19670, -8920]

  return {
    title: {
      text: '善恶行为类型对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: function (params) {
        let result = params[0].axisValue + '<br/>'
        params.forEach((param) => {
          result += param.seriesName + ': ' + Math.abs(param.value) + '<br/>'
        })
        return result
      }
    },
    legend: {
      data: ['善行', '恶行'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '15%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: {
        color: '#999',
        formatter: function (value) {
          return Math.abs(value / 1000) + 'K'
        }
      },
      splitLine: { lineStyle: { color: '#333' } }
    },
    yAxis: [
      {
        type: 'category',
        data: goodTypes,
        axisLine: { lineStyle: { color: '#666' } },
        axisLabel: { color: '#999' }
      },
      {
        type: 'category',
        data: evilTypes,
        axisLine: { lineStyle: { color: '#666' } },
        axisLabel: { color: '#999' }
      }
    ],
    series: [
      {
        name: '善行',
        type: 'bar',
        yAxisIndex: 0,
        data: goodCounts,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#52c41a' },
              { offset: 1, color: '#73d13d' }
            ]
          }
        }
      },
      {
        name: '恶行',
        type: 'bar',
        yAxisIndex: 1,
        data: evilCounts,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#ff7875' },
              { offset: 1, color: '#ff4d4f' }
            ]
          }
        }
      }
    ]
  }
})

// 年龄组善恶分布
const ageGroupKarmaOption = computed(() => {
  const ageGroups = ['0-18', '19-30', '31-45', '46-60', '61-75', '75+']
  const goodRatio = [45.2, 68.7, 72.3, 75.8, 78.9, 82.4]
  const evilRatio = [54.8, 31.3, 27.7, 24.2, 21.1, 17.6]

  return {
    title: {
      text: '各年龄组善恶比例',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['善行比例', '恶行比例'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ageGroups,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '比例 (%)',
      max: 100,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '善行比例',
        type: 'bar',
        stack: 'total',
        data: goodRatio,
        itemStyle: { color: '#52c41a' }
      },
      {
        name: '恶行比例',
        type: 'bar',
        stack: 'total',
        data: evilRatio,
        itemStyle: { color: '#ff7875' }
      }
    ]
  }
})

// 地区善恶热力图
const regionKarmaHeatmapOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const karmaTypes = ['助人为乐', '见义勇为', '慈善捐赠', '孝敬父母', '诚实守信', '欺诈行为', '暴力犯罪']
  const data = []

  for (let i = 0; i < regions.length; i++) {
    for (let j = 0; j < karmaTypes.length; j++) {
      let value
      if (j < 5) {
        // 善行
        value = Math.floor(Math.random() * 80 + 20)
      } else {
        // 恶行
        value = Math.floor(Math.random() * 30 + 5)
      }
      data.push([j, i, value])
    }
  }

  return {
    title: {
      text: '地区善恶行为热力分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      position: 'top',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    grid: {
      height: '60%',
      top: '15%'
    },
    xAxis: {
      type: 'category',
      data: karmaTypes,
      splitArea: { show: true },
      axisLabel: { color: '#999', rotate: 45 }
    },
    yAxis: {
      type: 'category',
      data: regions,
      splitArea: { show: true },
      axisLabel: { color: '#999' }
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '5%',
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
      }
    },
    series: [
      {
        name: '行为数量',
        type: 'heatmap',
        data: data,
        label: {
          show: true,
          color: '#fff'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 表格数据
const karmaColumns = [
  { title: '行为类型', dataIndex: 'behavior', key: 'behavior', width: 120 },
  { title: '性质', dataIndex: 'nature', key: 'nature', width: 80 },
  { title: '数量', dataIndex: 'count', key: 'count', width: 100, sorter: (a, b) => a.count - b.count },
  { title: '占比', dataIndex: 'percentage', key: 'percentage', width: 80 },
  { title: '业力值', dataIndex: 'karmaValue', key: 'karmaValue', width: 100 },
  { title: '影响人数', dataIndex: 'affectedPeople', key: 'affectedPeople', width: 100 },
  { title: '同比变化', dataIndex: 'change', key: 'change', width: 100 }
]

const karmaTableData = ref([
  { key: 1, behavior: '助人为乐', nature: '善行', count: 58960, percentage: '18.5%', karmaValue: '+50', affectedPeople: 152840, change: '+5.2%' },
  { key: 2, behavior: '孝敬父母', nature: '善行', count: 45230, percentage: '14.2%', karmaValue: '+30', affectedPeople: 90460, change: '+3.8%' },
  { key: 3, behavior: '诚实守信', nature: '善行', count: 42180, percentage: '13.2%', karmaValue: '+20', affectedPeople: 84360, change: '+2.1%' },
  { key: 4, behavior: '慈善捐赠', nature: '善行', count: 35420, percentage: '11.1%', karmaValue: '+100', affectedPeople: 212520, change: '+8.7%' },
  { key: 5, behavior: '见义勇为', nature: '善行', count: 28750, percentage: '9.0%', karmaValue: '+150', affectedPeople: 86250, change: '+12.3%' },
  { key: 6, behavior: '欺诈行为', nature: '恶行', count: 25680, percentage: '8.1%', karmaValue: '-80', affectedPeople: 77040, change: '-2.5%' },
  { key: 7, behavior: '偷盗抢劫', nature: '恶行', count: 19670, percentage: '6.2%', karmaValue: '-120', affectedPeople: 39340, change: '-1.8%' },
  { key: 8, behavior: '暴力犯罪', nature: '恶行', count: 18920, percentage: '5.9%', karmaValue: '-200', affectedPeople: 56760, change: '-3.2%' },
  { key: 9, behavior: '贪污腐败', nature: '恶行', count: 16450, percentage: '5.2%', karmaValue: '-300', affectedPeople: 164500, change: '-4.1%' },
  { key: 10, behavior: '环保行为', nature: '善行', count: 31680, percentage: '9.9%', karmaValue: '+40', affectedPeople: 950400, change: '+15.6%' }
])

// 过滤数据
const filteredKarmaData = computed(() => {
  if (!searchKeyword.value) {
    return karmaTableData.value
  }
  return karmaTableData.value.filter((item) => item.behavior.includes(searchKeyword.value))
})

// 搜索功能
const onSearch = (value) => {
  searchKeyword.value = value
}

// 导出数据
const exportKarmaData = () => {
  message.success('业力数据导出成功')
}

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.good-stat .stat-icon {
  color: #52c41a;
}
.evil-stat .stat-icon {
  color: #ff7875;
}
.ratio-stat .stat-icon {
  color: #faad14;
}
.balance-stat .stat-icon {
  color: #1890ff;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head),
.table-card :deep(.ant-card-head),
.rating-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title),
.table-card :deep(.ant-card-head-title),
.rating-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body),
.table-card :deep(.ant-card-body),
.rating-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
}

.rating-content {
  margin-bottom: 24px;
}

.rating-item {
  margin-bottom: 20px;
}

.rating-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rating-label {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.rating-count {
  color: #d4990a;
  font-weight: 600;
  font-size: 14px;
}

.summary-section h4 {
  color: #d4990a;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.summary-list {
  list-style: none;
  padding: 0;
}

.summary-list li {
  padding: 6px 0;
  color: #b3c5d1;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.level {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.level.saint {
  background: #52c41a;
  color: #fff;
}
.level.good {
  background: #73d13d;
  color: #fff;
}
.level.normal {
  background: #faad14;
  color: #fff;
}
.level.evil {
  background: #ff7875;
  color: #fff;
}
.level.extreme {
  background: #ff4d4f;
  color: #fff;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d4990a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(255, 255, 255, 0.1) !important;
}
</style>
